<template>
  <Dialog
    :funcConfirm="funcCancel"
    :funcCancel="funcCancel"
    :headerTitle="headerTitle"
    :open="open"
  >
    <template v-slot:body>
      <div class="content-wrapper">
        <div class="input-box">
          <input
            class="share-input"
            id="shareInput"
            type="text"
            v-model="shareUrl"
            readonly="readonly"
          />
        </div>
        <button class="copy-button" @click="handleCopy">{{"复制"}}</button>
      </div>
    </template>
  </Dialog>
</template>

<script>
import Dialog from "@/component/dialog/Dialog";
import shareService from "@api/shareService";
export default {
  components: { Dialog },
  props: {
    uid: String,
  },
  data() {
    return {
      headerTitle: "分享展会",
      funcCancel: () => {
        this.$store.commit("dialog/SHARE_EXPO_OPEN", false);
      },
    };
  },
  // 监听属性 类似于data概念
  computed: {
    open() {
      return this.$store.state.dialog.isOpenShareExpo;
    },
    shareUrl() {
      return `${window.location.origin}/${this.$route.name}?uid=${this.uid}&isShare=1`;
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if(this.$route.name === "firstExpomodule"){
      shareService.shareParent(this.uid).then((res)=>{
        console.log(res)
      })
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleCopy() {
      const el = document.getElementById("shareInput");
      el.select();
      document.execCommand("copy");
      this.$message({
        message: "复制分享链接成功",
        type: "success",
      });
      this.funcCancel();
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="scss">
@import "@/style/scss/component/dialog/shareExpoDialog.scss";
</style>
